<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>使用slot分发内容</title>
</head>
<body>
  <div id="app">
    <child-component></child-component>
    <parent></parent>
    <list></list>
  </div>
  <script src="../js/libs/vue.js"></script>
  <script>
    // 编译作用域
    Vue.component('child-component', {
      //有效，在正确的作用域内
      template: '<div v-show="someChildProperty">Child</div>',
      data: function () {
        return {
          someChildProperty: true
        }
      }
    })
    // 单个slot
    // 子组件
    var child = Vue.extend({
      template: '\
        <div>\
          <h2>我是子组件的标题</h2>\
          <slot name="nothing"></slot>\
          <slot text="hello from child"></slot>\
          <slot name="something"></slot>\
          <slot name="more"></slot>\
        </div>\
      '
    })
    // 父组件
    var parent = Vue.extend({
      template: '\
        <div>\
          <h1>我是父组件的标题</h1>\
          <my-component>\
            <p slot="something">这是一些初始内容</p>\
            <p slot="more">这是更多的初始内容</p>\
            <p>未定义slot</p>\
            <template scope="props">\
              <span>hello from parent</span>\
              <span>{{ props.text }}</span>\
            </template>\
          </my-component>\
        </div>\
      ',
      components: {
        'my-component': child
      }
    })
    // 作用域插槽
    // 在父级中，具有特殊属性的scope的<template>元素，表示它是作用域插槽的模板，scope的值对应一个临时变量名，此变量名接受从子组件中传递的props对象
    // 作用域插槽代表性用例列表组件
    // 子组件
    var treeList = Vue.extend({
      data: function () {
        return {
          items: ['1', '2', '3', '4', '5']
        }
      },
      template: '\
        <ul>\
          <slot name="item"\
            v-for="item in items"\
            :text="item.text">\
          </slot>\
        </ul>\
      '
    })
    // 父组件
    var list = Vue.extend({
      template: '\
        <tree-list>\
          <template slot="item" scope="props">\
            <li class="list-li">{{ props.text }}</li>\
          </template>\
        </tree-list>\
      ',
      components: {
        'tree-list': treeList
      }
    })
    new Vue({
      el: '#app',
      data: {},
      components: {
        'parent': parent,
        'list': list
      }
    })
  </script>
</body>
</html>